<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>学生信息管理系统</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="../js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="../js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="../js/json.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
</head>
<body>


<div class="container">
    <h3 style="text-align: center">学生信息列表</h3>
    <div style="float: left;margin-bottom: 5px">
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputName2">学号</label>
                <input type="text" class="form-control" id="exampleInputName2">
                <a class="btn btn-warning" href="javascript:void(0)" id="findByID">
                    <span class=" glyphicon glyphicon-search"></span>
                </a>
            </div>
            <div class="form-group">
                <label for="exampleInputName3">姓名</label>
                <input type="text" class="form-control" id="exampleInputName3">
                <a class="btn btn-warning" href="javascript:void(0)" id="findByName">
                    <span class=" glyphicon glyphicon-search"></span>
                </a>
            </div>
            <div class="form-group">
                <label for="exampleInputName4">籍贯：</label>
                <select class="form-control" id="exampleInputName4">
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州">广州</option>
                </select>
                <a class="btn btn-warning" href="javascript:void(0)" id="findByAddress">
                    <span class=" glyphicon glyphicon-search"></span>
                </a>
            </div>
        </form>
    </div>
    <div style="float: right;margin-bottom: 5px">
        <a class="btn btn-primary" id="add" href="javascript:void(0);">添加学生</a>
        <a class="btn btn-danger" href="javascript:void(0);" id="delSelected">选中删除</a>
    </div>
    <table border="1" id="table1" class="table table-bordered table-hover table-striped">

    </table>
    <div style="float: left;">
        <nav aria-label="Page navigation">
            <ul class="pagination">


            </ul>
        </nav>
    </div>


    <!-- 添加模态框 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="mtk" class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加学生</h4>
                </div>
                <div class="modal-body">

                    <form id="addForm" method="post">

                        <div class="form-group">
                            <label for="name">姓名：</label>
                            <input type="text" class="form-control" id="name1" placeholder="请输入姓名"/>
                        </div>


                        <div class="form-group">
                            <label for="address">籍贯：</label>
                            <select name="address" class="form-control" id="address">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="广州">广州</option>
                            </select>
                        </div>


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="confirmAdd" class="btn btn-primary">确认添加</button>
                </div>
            </div>
        </div>
    </div>


    <!-- 修改模态框 -->

    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="mtk" class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改学生</h4>
                </div>
                <div class="modal-body">

                    <form id="updateForm" method="post">
                        <div class="form-group">
                            <label for="name">学号：</label>
                            <input type="text" class="form-control" readonly="readonly" id="id" name="id"
                                   placeholder="请输入学号">
                        </div>

                        <div class="form-group">
                            <label for="name">姓名：</label>
                            <input type="text" class="form-control" name="name" placeholder="请输入姓名"/>
                        </div>


                        <div class="form-group">
                            <label for="address">籍贯：</label>
                            <select name="address" class="form-control" id="address">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="广州">广州</option>
                            </select>
                        </div>


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="confirmUpdate" class="btn btn-primary">确认修改</button>
                </div>
            </div>
        </div>
    </div>


</body>
</html>
